<template>
  <div class="page-content">
    <DlTable
      v-bind="contentTableConfig"
      :listData="dataList"
      @selectionChange="selectionChangeHandle"
      :listCount="dataCount"
      :pageInfo="pageInfo"
    >
      <!-- 列中的插槽 -->
      <template #status="scope">
        <el-button
          size="default"
          plain
          :type="scope.row.enable ? 'success' : 'danger'"
          >{{ scope.row.enable ? "启用" : "禁用" }}</el-button
        >
      </template>
      <template #createAt="scope">
        <span>{{ $filters.formatTime(scope.row.createAt) }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ $filters.formatTime(scope.row.updateAt) }}</span>
      </template>
      <template #handler="scope">
        <div class="handler-btns">
          <el-button
            type="primary"
            link
            v-if="isUpdate"
            @click="handleEditClick(scope.row)"
            ><el-icon><Edit /></el-icon>编辑</el-button
          >
          <el-button
            type="primary"
            link
            v-if="isDelete"
            @click="handleDeleteClick(scope.row)"
            ><el-icon><Delete /></el-icon>删除</el-button
          >
        </div>
      </template>
      <!-- header和footer中的插槽 -->
      <template #headHandler>
        <el-button type="primary" @click="handleNewClick" v-if="isCreate">
          <el-icon><Plus /></el-icon>
          <span>新建</span>
        </el-button>
      </template>
      <template #footer></template>

      <!-- 在page-content中动态插入剩余的插槽 -->
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </DlTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from "vue";
import { useStore } from "vuex";
import DlTable from "@/base-ui/table";
import { usePermission } from "@/hooks/usePermission";
export default defineComponent({
  props: {
    contentTableConfig: {
      type: Object,
      required: true,
    },
    pageName: {
      type: String,
      required: true,
    },
  },
  components: {
    DlTable,
  },
  emits: ["newBtnClick", "editBtnClick"],
  setup(props, { emit }) {
    //获取操作权限
    const isCreate = usePermission(props.pageName, "create");
    const isUpdate = usePermission(props.pageName, "update");
    const isDelete = usePermission(props.pageName, "delete");
    const isQuery = usePermission(props.pageName, "query");
    const store = useStore();
    const pageInfo = ref({ currentPage: 1, pageSize: 10 });
    const dataList = computed(() =>
      store.getters[`system/pageListData`](props.pageName)
    );
    const dataCount = computed(() =>
      store.getters[`system/pageListCount`](props.pageName)
    );
    const getPageData = (queryInfo: any = {}) => {
      if (isQuery) {
        store.dispatch("system/getPageListAction", {
          pageName: props.pageName,
          queryInfo: {
            offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
            size: pageInfo.value.pageSize,
            ...queryInfo,
          },
        });
      }
    };
    getPageData();
    const selectionChangeHandle = (value: any) => {
      console.log("selection", value);
    };
    watch(pageInfo, () => getPageData(), { deep: true });
    // 获取其他的动态插槽名称
    const otherPropSlots = props.contentTableConfig?.propList.filter(
      (item: any) => {
        if (item.slotName === "status") return false;
        if (item.slotName === "createAt") return false;
        if (item.slotName === "updateAt") return false;
        if (item.slotName === "handler") return false;
        return true;
      }
    );
    //删除操作
    const handleDeleteClick = (item: any) => {
      store.dispatch("system/deletePageDataAction", {
        pageName: props.pageName,
        id: item.id,
      });
    };
    //新建操作
    const handleNewClick = () => {
      emit("newBtnClick");
    };
    //编辑操作
    const handleEditClick = (item: any) => {
      console.log("item", item);
      emit("editBtnClick", item);
    };
    return {
      dataCount,
      dataList,
      selectionChangeHandle,
      getPageData,
      pageInfo,
      otherPropSlots,
      isCreate,
      isUpdate,
      isDelete,
      handleDeleteClick,
      handleNewClick,
      handleEditClick,
    };
  },
});
</script>

<style scoped>
.page-content {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
</style>
